<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02DOM练习</title>
</head>
<body>
<h1>我是标题: <span class="s"></span> </h1>
<button onclick="f1()">按钮</button>
<hr>
<input type="text" id="i1">
<input type="text" id="i2">
<button onclick="f2()">按钮2</button>

<script>
    function f1() {
        // 根据类选择器找到span元素
        let spanE = document.querySelector('.s');
        // 设置span元素内的显示文本
        // spanE.innerHTML = '哈哈哈';
        // spanE.innerHTML = ('哈<u>哈</u>哈');
        spanE.innerHTML = `<table border="1px">
              <tr>
                  <td>阿斯顿</td>
                 <td>丰大厦</td>
               <td>发生的</td>
             </tr>
           </table>`;

    }

    function f2() {
        let input1 = document.querySelector('#i1'); // 根据id选择器获取元素
        let input2 = document.getElementById('i2'); // 根据id值获取元素
        console.log(typeof input1.value); // 从输入框中获取的内容是string类型
        console.log(input1.value+input2.value);
        let i1 = parseFloat(input1.value); // 类型转换
        let i2 = parseFloat(input2.value); // 类型转换
        console.log(i1,typeof i1); // 'number'
        console.log(i1+i2);

    }

</script>
</body>
</html>